import React from "react";

export const Preview = (props) => {
  const { title, author, content, target, picture } = props;
  
  return (
    <section className='flex-container preview'>
      <div className='wrapper'>
        <div className='target-dom' ref={target}>
          <div className='card'>
            <div className="picture">
              {/* <img className="lefttop" alt="" src={require('./image/bird.png')}/>
              <img className="righttop" alt="" src={require('./image/flower.png')}/>
              <img className="underall" alt="" src={require('./image/grass.png')}/> */}
              {
                picture.map(
                  i => {return i}
                )
              }
            </div>
            <div className='content'>
            <div className='wraper'>
              <pre>{content}</pre>
              {(author.length > 0) | (title.length > 0) ? (
                <p>
                  ———— {author} {title}
                </p>
              ) : null}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
